// 将来要的效果:
// 1. Message({ type: 'success', text: '登录成功' })
// 2. Message.success('登录成功')
// 3. Message.error('登录失败')
import XtxMessage from "./message.vue"
import { h,render } from 'vue'
type Params={
    type : 'success' | 'error' | 'warning',
    text : string,
    duration?: number
}
// 准备一个div, 这个div专门用于存放显示隐藏的弹框
// 1. 显示, 往 一个 专门的 div 中显示
// 2. 隐藏, 将 这个 专门的 div 内容销毁
// 往body中新增一个盒子
// 目前的效果: 如果有多个提示框, 后面的提示框会将前面的覆盖 => 同时只能一个提示框
// 只要这个js被引入了, 里面的代码就会执行
const divContainer = document.createElement('div')
divContainer.setAttribute('class', 'xtx-message-container')
document.body.appendChild(divContainer)

const Message =({type,text,duration = 2000} :Params ) => {
    //创建dom
    const vXtxMessage = h(XtxMessage, {type} ,text )
    //挂载
    // render(vXtxMessage,document.querySelector('.box')!)
    render(vXtxMessage,divContainer)
      // 3. 开一个延时器, 到时间让他隐藏
  setTimeout(() => {
    // 删除虚拟dom
    // render(null, document.querySelector('.box')!)
    render(null, divContainer)
  }, duration)
}

Message.success = function(text:string , duration = 2000){
Message({
    type: 'success',
    text,
    duration,
    })
}
Message.error = function(text:string , duration = 2000){
  Message({
      type: 'error',
      text,
      duration,
      })
  }
  Message.warning = function(text:string , duration = 2000){
    Message({
        type: 'warning',
        text,
        duration,
        })
    }
export default  Message